<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="./index.css" />
  <title>flex布局--写代码的浩</title>
</head>
<body>
  <details open>
    <summary>Flex容器的属性Demo</summary>
    <h2>flex-direction: 决定主轴的方向</h2>
    <div class="flex-demo">
      <div>
        <h2>flex-direction: row（默认）</h2>
        <div class="flex-container" style="flex-direction: row">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>flex-direction: row-reverse</h2>
        <div class="flex-container" style="flex-direction: row-reverse">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>flex-direction: column</h2>
        <div class="flex-container" style="flex-direction: column">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>flex-direction: column-reverse</h2>
        <div class="flex-container" style="flex-direction: column-reverse">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
    </div>
    
    <br /><br />
    <h2>flex-wrap: 项目是否排在一行上。超过一行才会生效</h2>
    <div class="flex-demo">
      <div>
        <h2>flex-wrap: nowrap（默认）</h2>
        <div class="flex-container" style="flex-wrap: nowrap">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>flex-wrap: wrap</h2>
        <div class="flex-container" style="flex-wrap: wrap">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>flex-wrap: wrap-reverse</h2>
        <div class="flex-container" style="flex-wrap: wrap-reverse">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>justify-content: 项目在主轴上的对齐方式。不足一行才会生效</h2>
    <div class="flex-demo" style="height:400px">
      <div>
        <h2>justify-content: flex-start（默认）</h2>
        <div class="flex-container" style="justify-content: flex-start">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>justify-content: flex-end</h2>
        <div class="flex-container" style="justify-content: flex-end">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>justify-content: center</h2>
        <div class="flex-container" style="justify-content: center">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>justify-content: space-between</h2>
        <div class="flex-container" style="justify-content: space-between">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>justify-content: space-around</h2>
        <div class="flex-container" style="justify-content: space-around">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>justify-content: space-evenly</h2>
        <div class="flex-container" style="justify-content: space-evenly">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>align-items: 项目在交叉轴上如何对齐。不足一列才会生效</h2>
    <div class="flex-demo">
      <div>
        <h2>align-items: flex-start</h2>
        <div class="flex-container" style="align-items: flex-start">
          <div class="flex-child">1</div>
          <div class="flex-child" style="font-size: 60px;">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>align-items: flex-end</h2>
        <div class="flex-container" style="align-items: flex-end">
          <div class="flex-child">1</div>
          <div class="flex-child" style="font-size: 60px;">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>align-items: center</h2>
        <div class="flex-container" style="align-items: center">
          <div class="flex-child">1</div>
          <div class="flex-child" style="font-size: 60px;">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>align-items: baseline</h2>
        <div class="flex-container" style="align-items: baseline">
          <div class="flex-child">1</div>
          <div class="flex-child" style="font-size: 60px;">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>align-items: stretch（默认）;(子节点height: auto;)</h2>
        <div class="flex-container" style="align-items: stretch">
          <div class="flex-child" style="height: auto">1</div>
          <div class="flex-child" style="height: auto;font-size: 60px;">2</div>
          <div class="flex-child" style="height: auto">3</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>align-content: 定义了多根轴线的对齐方式。一根轴线不生效。flex-wrap不为nowrap才会生效</h2>
    <div class="flex-demo" style="height:400px">
      <div>
        <h2>align-content: flex-start</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: flex-start">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: flex-end</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: flex-end">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: center</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: center">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: space-between</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: space-between">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: space-around</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: space-around">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: space-evenly</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: space-evenly">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: stretch（默认）</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: stretch">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
    </div>
  </details>
  
  <br /><br />
  <details open>
    <summary>Flex项目的属性Demo</summary>
    <h2>order: 项目的排列顺序。数值越小，排列越靠前，默认为0</h2>
    <div class="flex-demo flex-item-demo">
      <div>
        <h2>order</h2>
        <div class="flex-container">
          <div class="flex-child" style="order: 2">1  order:2</div>
          <div class="flex-child" style="order: 1">2  order:1</div>
          <div class="flex-child" style="order: 3">3  order:3</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>flex-grow: 项目的放大比例，默认为0，0表示不缩放</h2>
    <div class="flex-demo flex-item-demo">
      <div>
        <h2>flex-grow</h2>
        <div class="flex-container" data-flex="grow">
          <div class="flex-child" style="flex-grow: 0">1  grow:0</div>
          <div class="flex-child" style="flex-grow: 2">2  grow:2</div>
          <div class="flex-child" style="flex-grow: 6">3  grow:6</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>flex-shrink: 项目的缩小比例，默认为0，0表示不缩放</h2>
    <div class="flex-demo flex-item-demo">
      <div>
        <h2>flex-shrink</h2>
        <div class="flex-container" data-flex="shrink">
          <div class="flex-child" style="flex-shrink: 0">1  shrink:0</div>
          <div class="flex-child" style="flex-shrink: 2">2  shrink:2</div>
          <div class="flex-child" style="flex-shrink: 6">3  shrink:6</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>flex-basis: 在分配多余空间之前，项目占据的主轴空间</h2>
    <div class="flex-demo flex-item-demo">
      <div>
        <h2>flex-basis</h2>
        <div class="flex-container" data-flex="basis">
          <div class="flex-child" style="flex-basis: 160px">1  basis:160px</div>
          <div class="flex-child" style="flex-basis: 280px">2  basis:280px</div>
          <div class="flex-child" style="flex-basis: 360px">3  basis:360px</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>align-self: 单个项目覆盖父容器的`align-items`属性。父节点默认align-items: flex-start;</h2>
    <div class="flex-demo flex-item-demo" data-flex="alignSelf">
      <div>
        <h2>align-self: flex-start</h2>
        <div class="flex-container" style="align-items: flex-end">
          <div class="flex-child">1</div>
          <div class="flex-child" style="align-self: flex-start">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>align-self: flex-end</h2>
        <div class="flex-container">
          <div class="flex-child">1</div>
          <div class="flex-child" style="align-self: flex-end">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>align-self: center</h2>
        <div class="flex-container">
          <div class="flex-child">1</div>
          <div class="flex-child" style="align-self: center">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>align-self: baseline</h2>
        <div class="flex-container">
          <div class="flex-child">1</div>
          <div class="flex-child" style="align-self: baseline">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>align-self: stretch（默认）;(子节点height: auto;)</h2>
        <div class="flex-container">
          <div class="flex-child" style="height: auto">1</div>
          <div class="flex-child" style="height: auto;align-self: stretch">2</div>
          <div class="flex-child" style="height: auto">3</div>
        </div>
      </div>
    </div>
  </details>
  <script src="./index.js"></script>
</body>
</html>
